<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 新增试题123 -->
      <el-row>
        <el-button
          type="success"
          icon="el-icon-edit"
          class="addBtn"
          @click="redirect"
          >新增试题</el-button
        >
      </el-row>
      <!-- 搜索 -->
      <el-form
        label-width="80px"
        :model="requestQuestions"
        ref="requestQuestions"
      >
        <el-form-item label="学科">
          <el-select
            placeholder="请选择"
            clearable
            v-model="requestQuestions.subjectID"
            @keyup.enter="handleFilter"
            @change="selectCatalog"
          >
            <el-option
              v-for="item in subject"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级目录">
          <el-select
            placeholder="请选择"
            clearable
            v-model="requestQuestions.catalogID"
            @keyup.enter="handleFilter"
          >
            <el-option
              v-for="item in catalog"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签">
          <el-select
            placeholder="请选择"
            clearable
            v-model="requestQuestions.tags"
            @keyup.enter="handleFilter"
          >
            <el-option
              v-for="item in tags"
              :key="item.id"
              :label="item.tagName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input v-model="requestQuestions.keyword"></el-input>
        </el-form-item>
        <el-form-item label="试题类型">
          <el-select
            placeholder="请选择"
            clearable
            v-model="requestQuestions.questionType"
            @keyup.enter="handleFilter"
          >
            <el-option
              v-for="item in questionType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="难度">
          <el-select
            placeholder="请选择"
            clearable
            v-model="requestQuestions.difficulty"
            @keyup.enter="handleFilter"
          >
            <el-option
              v-for="item in difficulty"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向">
          <el-select
            placeholder="请选择"
            clearable
            v-model="requestQuestions.direction"
            @keyup.enter="handleFilter"
          >
            <el-option
              v-for="item in direction"
              :key="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="录入人">
          <el-select
            placeholder="请选择"
            clearable
            v-model="requestQuestions.creatorID"
            @keyup.enter="handleFilter"
          >
            <el-option
              v-for="item in users"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目备注">
          <el-input v-model="requestQuestions.remarks"></el-input>
        </el-form-item>
        <el-form-item label="企业简称">
          <el-input v-model="requestQuestions.shortName"></el-input>
        </el-form-item>
        <el-form-item label="城市" class="city">
          <el-select
            v-model="requestQuestions.province"
            clearable
            @keyup.enter="handleFilter"
            @change="handleProvince"
            filterable
          >
            <el-option
              v-for="item in citySelect.province"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
          <el-select
            clearable
            v-model="requestQuestions.city"
            @keyup.enter="handleFilter"
            filterable
          >
            <el-option
              v-for="item in citySelect.cityDate"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-row type="flex">
            <el-button type="primary" @click="handleFilter">搜索</el-button>
            <el-button type="primary" @click="resetSelect">清除</el-button>
          </el-row>
        </el-form-item>
      </el-form>

      <!-- 数据记录 -->
      <el-alert
        v-if="alertText !== ''"
        :title="alertText"
        type="info"
        class="alert"
        :closable="false"
        show-icon
      ></el-alert>

      <!-- 数据列表 -->
      <el-table
        :key="tableKey"
        :data="dataList"
        v-loading="listLoading"
        element-loading-text="拼命加载中"
        fit
        highlight-current-row
        style="width: 100%"
        border
      >
        <el-table-column align="center" label="试题编号">
          <template slot-scope="scope">
            <span>{{ scope.row.number }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="学科" width="60px">
          <template slot-scope="scope">
            <span>{{ scope.row.subject }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="目录" width="80px">
          <template slot-scope="scope">
            <span>{{ scope.row.catalog }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="题型" width="60px">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType == 1">单选</span>
            <span v-else-if="scope.row.questionType == 2">多选</span>
            <span v-else>简答</span>
          </template>
        </el-table-column>
        <el-table-column label="题干">
          <template slot-scope="scope">
            <span v-html="scope.row.question">{{ scope.row.question }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="录入时间">
          <template slot-scope="scope">
            <span>{{ scope.row.addDate }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="难度" width="60px">
          <template slot-scope="scope">
            <span v-if="scope.row.difficulty == 1">简单</span>
            <span v-else-if="scope.row.difficulty == 2">一般</span>
            <span v-else>困难</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="录入人" width="100px">
          <template slot-scope="scope">
            <span>{{ scope.row.creator }}</span>
          </template>
        </el-table-column>
        <!-- 操作按钮 -->
        <el-table-column label="操作" align="center" fixed="right">
          <template slot-scope="scope">
            <el-row class="btn">
              <el-button
                type="primary"
                icon="el-icon-view"
                plain
                circle
                @click="readQuestions(scope.row)"
              ></el-button>
              <el-button
                type="success"
                icon="el-icon-edit"
                plain
                circle
                @click="redirectId(scope.row.id)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                plain
                circle
                @click="Delete(scope.row)"
              ></el-button>
              <el-button
                type="warning"
                icon="el-icon-check"
                plain
                circle
                @click="joinSelect(scope.row)"
              ></el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-row type="flex" justify="end">
        <div class="pagination">
          <div class="pages">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="Number(requestQuestions.page)"
              :total="Number(total)"
              :page-size="Number(requestQuestions.pagesize)"
              :page-sizes="[2, 5, 8, 10]"
              layout="sizes, prev, pager, next, jumper"
            ></el-pagination>
          </div>
        </div>
      </el-row>

      <!-- 试题预览对话框 -->
      <questions-preview ref="readQuestions"></questions-preview>
    </el-card>
  </div>
</template>

<script>
import _ from 'lodash'
import { list, remove, choiceAdd } from '@/api/hmmm/questions.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { simple } from '@/api/hmmm/subjects.js'
import { simple as catalog } from '@/api/hmmm/directorys.js'
import { list as tags } from '@/api/hmmm/tags.js'
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
import { list as users } from '@/api/base/users.js'
import questionsPreview from '@/module-hmmm/components/questions-preview.vue'
import { parseTimeByString } from '@/filters/index.js'
export default {
  name: 'questions',
  components: {
    questionsPreview
  },
  data () {
    return {
      requestQuestions: {
        page: 1,
        pagesize: 10,
        subjectID: '',
        catalogID: '',
        tags: '',
        keyword: '',
        questionType: '',
        creatorID: '',
        difficulty: '',
        direction: '',
        remarks: '',
        shortName: '',
        province: '',
        city: ''
      }, // 请求数据参数
      dataList: [], // 获取数据
      listLoading: true, // 加载
      total: null, // 数据总条数
      tableKey: 0,
      alertText: '', // 总条数的模板字符串
      // 获取城市信息
      citySelect: {
        province: [],
        cityDate: []
      },
      subject: [], // 学科下拉菜单
      // 被选择的学科
      sureSubject: {
        subjectID: 0,
        directoryName: ''
      },
      catalog: [], // 二级目录下拉菜单
      tags: [], // 标签下拉菜单
      questionType: [], // 题型下拉菜单
      difficulty: [], // 难度下拉菜单
      direction: [], // 方向下拉菜单
      users: [] // 录入人下拉菜单
    }
  },
  async created () {
    await this.getList()
    await this.getCityData()
    await this.select()
  },
  methods: {
    // 获取列表数据,数据初始化
    async getList () {
      this.listLoading = true
      this.requestQuestions = _.omitBy(this.requestQuestions, (value, key) => _.isEmpty(value) && !_.isNumber(value))
      const { data: res } = await list(this.requestQuestions)
      // 获取数据给dataList
      this.dataList = res.items
      // 时间转换
      this.changeTime()
      // 获取总条数
      this.total = res.counts
      this.alertText = `共 ${this.total} 条记录`
      this.listLoading = false
    },
    // 生成列表
    select () {
      // 获取学科列表
      this.selectSubject()
      // 获取题型列表
      this.selectQuestionType()
      // 获取难度列表
      this.selectdifficulty()
      // 获取方向列表
      this.selectdirection()
      // 获取录入人列表
      this.selectusers()
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.requestQuestions.page = val
      this.getList()
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.requestQuestions.pagesize = val
      if (this.requestQuestions.page === 1) {
        this.getList(this.requestQuestions)
      }
    },
    // 时间转换格式11
    changeTime () {
      this.dataList.forEach(item => {
        const newTime = parseTimeByString(item.addDate)
        item.addDate = newTime
      })
    },
    // 搜索信息
    handleFilter () {
      this.requestQuestions.page = 1
      this.getList()
    },
    // 获取市
    getCityData () {
      this.citySelect.province = provinces()
    },
    // 选市获取到区
    handleProvince (e) {
      this.citySelect.cityDate = citys(e)
      this.requestQuestions.city = this.citySelect.cityDate[0]
    },
    // 获取学科简单列表,下拉菜单
    async selectSubject () {
      const { data } = await simple()
      this.subject = data
    },
    // 获取二级目录下拉菜单
    async selectCatalog (e) {
      this.sureSubject.subjectID = e
      const { data } = await catalog(this.sureSubject)
      this.catalog = data
      this.requestQuestions.catalogID = this.catalog[0].label
      // 生成标签下拉列表
      this.selecttags()
    },
    // 获取标签下拉菜单
    async selecttags () {
      const { data } = await tags(this.sureSubject)
      this.tags = data.items
      this.requestQuestions.tags = this.tags[0].tagName
    },
    // 获取题型列表
    selectQuestionType () {
      this.questionType = questionType
    },
    // 获取难度列表
    selectdifficulty () {
      this.difficulty = difficulty
    },
    // 获取方向列表
    selectdirection () {
      this.direction = direction
    },
    // 获取录入人下拉菜单
    async selectusers () {
      const { data } = await users()
      this.users = data.list
    },
    // 清除下拉菜单
    resetSelect () {
      // this.$refs.requestQuestions.resetFields()
      Object.assign(this.$data, this.$options.data())
      // 清空后要初始化所有数据
      this.getList()
      this.getCityData()
      this.select()
    },
    // 跳转到试题录入
    redirect () {
      this.$router.replace('/questions/new')
    },
    // 跳转到试题录入
    redirectId (id) {
      // this.$router.push(`/questions/new/?${id}`)
      this.$router.push({
        path: '/questions/new',
        query: {
          id: id
        }
      })
    },
    // 打开题目预览
    readQuestions (row) {
      this.$refs.readQuestions.dialogPreviewOpen(row)
    },
    // 是否删除
    async Delete (data) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(data)
        this.resetSelect()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.resetSelect()
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 是否加入精选题库
    joinSelect (data) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async () => {
        data.choiceState = 1
        await choiceAdd(data)
        this.resetSelect()
        this.$message({
          type: 'success',
          message: '加入成功!'
        })
        this.$router.push('/questions/choice')
      }).catch(() => {
        this.resetSelect()
        this.$message({
          type: 'info',
          message: '已取消加入'
        })
      })
    }
  }
}

</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.container {
  .pagination {
    margin-top: 20px;
  }
  padding: 20px;
  .box-card {
    .addBtn {
      float: right;
    }
    .el-form {
      padding-top: 20px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .el-form-item {
        width: 25%;
        .el-select {
          width: 100%;
        }
        .el-button {
          margin-right: 10px;
        }
      }
      .city {
        .el-select {
          width: 50%;
        }
      }
    }
    .el-table {
      margin-top: 20px;
    }
    .btn {
      display: flex;
      justify-content: center;
    }
  }
}
</style>
